<template>
  <view>
    <view class="applicat-info" id="applicat-info">
      <view class="invite-id boxShadow">
        <!-- 楼长类型 -->
        <view class="list-first">
          <view class="list-title">
            <u-section
              title="商户类型"
              :right="false"
              :bold="true"
              :font-size="28"
              color="#D65C45"
            >
            </u-section>
          </view>
          <view
            class="builder-kind"
            @click="$refs.AccountKinds.show = true"
            :style="{ color: selectActive == true ? '#333333' : '' }"
          >
            {{ builderKind }}>
          </view>
        </view>
        <view class="list-first">
          <view class="list-title">
            <u-section
              title="邀请码"
              :right="false"
              :bold="true"
              :font-size="28"
              color="#D65C45"
            >
            </u-section>
          </view>
          <u-input
            v-model="apiForm.partner_code"
            type="text"
            :clearable="false"
            input-align="right"
            :border="false"
            placeholder="填写邀请码"
            :placeholder-style="'text-align:end;color:#999999;font-size:28rpx;'"
            :height="80"
          />
        </view>
      </view>

      <view class="form">
        <!-- 学生 -->
        <student-form ref="studentForm" v-if="apiForm.type == 1" />
        <!-- 社会人 -->
        <society-form ref="societyForm" v-else-if="apiForm.type == 2" />
      </view>
      <!-- 账户类型选择 -->
      <account-kind ref="AccountKinds" />
    </view>
    <!-- 提交 -->
    <view class="submit" @click="submitApply"> 提交</view>
  </view>
</template>

<script>
import AccountKind from "./components/accountKind";
import SocietyForm from "./components/societyForm";
import StudentForm from "./components/studentForm";

export default {
  components: {
    AccountKind,
    SocietyForm,
    StudentForm,
  },
  data() {
    return {
      selectActive: false,
      builderKind: "请选择商户类型",
      partner_code_name: "",
      // 申请商户数据
      apiForm: {
        type: 2,
        shop_name: "",
        idcard: "",
        card_pic_front: "",
        card_pic_end: "",
        certification_number: "",
        certification_pic_front: "",
        certification_pic_end: "",
        school_id: "",
        build: "",
        floor: "",
        number: "",
        address: "",
        longitude: "",
        latitude: "",
        partner_code: "", //推荐吗  20-3-34新增
      },
    };
  },
  watch: {
    // 检测 是否已经选择了类型
    builderKind: {
      handler(newV, oldV) {
        this.selectActive = true;
      },
    },
  },
  onShow() {
    if (
      this.vuex_school.hasOwnProperty("id") &&
      this.vuex_school.hasOwnProperty("title")
    ) {
      this.apiForm.school_id = this.vuex_school.id;
      this.$refs.studentForm.schoolName = this.vuex_school.title;
      this.$refs.studentForm.schoolActive = true;
    }
  },
  methods: {
    /**
     * 选择楼长
     */
    chooseBuilder() {
      console.log(11111111);
    },

    /**
     * 提交申请
     */
    submitApply() {
      console.log(this.apiForm);
      // 学生代理提交
      if (this.apiForm.type === 1) {
        this.submitApplyStudent();
      } else {
        this.submitApplyOther();
      }
    },

    /**
     * 学生代理提交
     */
    submitApplyStudent() {
      if (this.builderKind === "请选择商户类型") {
        this.$u.toast("请选择商户类型");
        return;
      }
      if (this.apiForm.school_id === "") {
        this.$u.toast("请选择学校");
        return;
      }
      if (this.apiForm.build === "") {
        this.$u.toast("请填写楼栋");
        return;
      }
      if (this.apiForm.floor === "") {
        this.$u.toast("请填写楼层");
        return;
      }
      if (this.apiForm.number === "") {
        this.$u.toast("请填写宿舍号");
        return;
      }
      if (this.apiForm.shop_name === "") {
        this.$u.toast("请填写店铺名称");
        return;
      }
      if (this.apiForm.true_name === "") {
        this.$u.toast("请填写您的真实姓名");
        return;
      }
      if (this.apiForm.idcard === "") {
        this.$u.toast("请填写身份证号码");
        return;
      }
      if (this.apiForm.certification_number === "") {
        this.$u.toast("请填写学生证号");
        return;
      }
      if (this.apiForm.card_pic_front === "") {
        this.$u.toast("请上传身份证正面");
        return;
      }
      if (this.apiForm.card_pic_end === "") {
        this.$u.toast("请上传身份证反面");
        return;
      }
      if (this.apiForm.certification_pic_front === "") {
        this.$u.toast("请上传学生证正面");
        return;
      }
      if (this.apiForm.certification_pic_end === "") {
        this.$u.toast("请上传学生证反面");
        return;
      }
      this.apiForm.address = undefined;
      this.apiForm.longitude = undefined;
      this.apiForm.latitude = undefined;
      this.$u.api.merchantApplyApi(this.apiForm).then((res) => {
        uni.showToast({
          title: "提交成功",
          duration: 2000,
        });
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/center/center",
          });
        }, 2000);
      });
    },

    /**
     * 社会人提交
     */
    submitApplyOther() {
      if (this.builderKind === "请选择商户类型") {
        this.$u.toast("请选择商户类型");
        return;
      }
      if (this.apiForm.shop_name === "") {
        this.$u.toast("请填写店铺名称");
        return;
      }
      if (this.apiForm.address === "") {
        this.$u.toast("请定位通讯地址");
        return;
      }
      if (this.apiForm.true_name === "") {
        this.$u.toast("请填写真实姓名");
        return;
      }
      if (this.apiForm.idcard === "") {
        this.$u.toast("请填写身份证号码");
        return;
      }
      if (this.apiForm.certification_number === "") {
        this.$u.toast("请填写营业执照号码");
        return;
      }
      if (this.apiForm.card_pic_front === "") {
        this.$u.toast("请上传身份证正面");
        return;
      }
      if (this.apiForm.card_pic_end === "") {
        this.$u.toast("请上传身份证反面");
        return;
      }
      if (this.apiForm.certification_pic_front === "") {
        this.$u.toast("请上传营业执照正面");
        return;
      }
      if (this.apiForm.certification_pic_end === "") {
        this.$u.toast("请上传正面文件");
        return;
      }
      this.$u.api.merchantApplyApi(this.apiForm).then((res) => {
        uni.showToast({
          title: "提交成功",
          duration: 2000,
        });
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/center/center",
          });
        }, 2000);
      });
    },
  },
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.list-title {
  width: 150rpx;
}
.list-input {
  flex: 1;
}
.builder-kind {
  flex: 1;
  color: #999999;
  font-size: 28rpx;
  text-align: end;
  height: 80rpx;
  line-height: 80rpx;
}
.applicat-info {
  background-color: #f7f7f7;
  padding: 20rpx;
  min-height: 100vh;
  margin-bottom: 100rpx;
  .invite-id {
    /* height: 110rpx; */
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 10rpx 30rpx;
    .list-first {
      border-bottom: 1rpx solid #e6e6e6;
      @include flex-row;
      padding: 10rpx 0;
    }
    .list-first:last-child {
      border-bottom: none;
    }
  }
  .form {
    background-color: #ffffff;
    border-radius: 20rpx;
    /* padding: 10rpx 30rpx; */
    margin-top: 20rpx;
  }
}
.submit {
  position: fixed;
  bottom: 0;
  height: 100rpx;
  width: 100%;
  text-align: center;
  line-height: 100rpx;
  color: #ffffff;
  font-size: 32rpx;
  background-color: #d65c45;
  z-index: 999;
}
</style>
